//
//  SwiftUIView_SafeArea.swift
//  SwiftUIPractice
//
//  Created by 和教程上的不一样啊 (external - Project) on 2024/9/9.
//

import SwiftUI

struct SwiftUIView_SafeArea: View {
    var body: some View {
        
//        //现在这么直接使用, 好像没有遵照安全区域, 直接就是全屏
//        Text("现在这么直接使用, 好像没有遵照安全区域, 直接就是全屏")
//            .frame(maxWidth: .infinity, maxHeight: .infinity)
//            .background(Color.yellow)

        
        
//        VStack {
//            Rectangle().fill(Color.brown)
//            //.frame(maxWidth: .infinity, maxHeight: .infinity) 这一句加不加都无所谓, 因为这个 Rectangle 是在 VStack 里面的,撑再大,也逃不出去
//        }
//        //不要加上下面这一行, 会把上下的刘海给你留出来
//        //.ignoresSafeArea(.all)

        
        
        
//        VStack {
//            Rectangle().fill(Color.brown)
//        }
//        //单独这个还是能拿出来用的, 用它来指定需要忽略的区域, 还有  .horizontal 和 .verticle
//        .edgesIgnoringSafeArea(.top)

        

//        //这个东西直接就是保留了安全区域, 然后把文字顶到安全区域的头部
//        VStack {
//            Text("这是一段文本")
//            Spacer().background(Color.orange)
//        }
//        .background(Color.brown)
        
        
        
        
        /*
         
         弹幕: 新版本里, 关于按钮或者文本的安全区域被自动添加了, 背景色填充会自动忽略安全区域
         
         所以, .background(Color.brown) 这样的东西, 会直接充满屏幕, 而不管你的安全区域
         
         */
        
        
        
//        ZStack {
//            
//            Color.blue // 可以使用这种办法来直接填充 ZStack 的背景色, 这是 ZStack 的背景色, 蓝色 [此时 安全区域是漏出来的]
//                .edgesIgnoringSafeArea(.all) // 用这个方法, 然后, 这个蓝色区域就会充满屏幕, 覆盖掉 安全区域
//            
//            VStack {
//                Text("nihaochengxuyuan")
//                Spacer()
//            }
//            .background(Color.brown) //注意,因为这是 "background" 它会自动忽略掉安全区域, 所以,这个 VStack 的棕色 ,垂直方向 直接顶到头尾
//            
//        }
        
        
        

        // Z向的 stackview视图和它里面的一些子视图
//        ZStack {
//            Color.blue // 可以使用这种办法来直接填充 ZStack 的背景色, 这是 ZStack 的背景色, 蓝色 [此时 安全区域是漏出来的]
//                .edgesIgnoringSafeArea(.all) // 用这个方法, 然后, 这个蓝色区域就会充满屏幕, 覆盖掉 安全区域
//            VStack {
//                Color.yellow.frame(height: 100) //注意,这是黄色 这个东西会是一个色块
//                Text("nihaochengxuyuan")
//                Spacer().frame(width: 10).background(Color.orange) //这个东西要加上尺寸才能显示
//            }
//        }

        
        ScrollView {
            VStack {
                Text("这是一个标题").font(.largeTitle).frame(maxWidth: .infinity, alignment: .leading)
                ForEach(0..<10) { index in
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color.white)
                        .frame(height: 150)
                        .shadow(radius: 10)
                        .padding(20)
                }
            }
        }
        //你加的这个绿色背景, 实际上是自动忽略了安全区域的部分,绿色充满了整个屏幕.
        //*** 在之前的开发中, 这个绿色只会填充在安全区域内部, 如果需要填充整个屏幕, 那么还需要在背后搞一个 ZStack
        // !!! 现在不用了, 背景色会自动填充.
        .background(Color.green)
        
        //这是新的代码写法, 后面就开始用这个方式吧
        //.ignoresSafeArea(.all, edges: .all) //   .all   .horizontal    .vertical
        



    }
}

#Preview {
    SwiftUIView_SafeArea()
}
